{% extends 'base.html' %}
{% load humanize %}
{% load custom_filters  %}
{% load math_extras %}
{% block content %}

<style>
  
  /* Styles uniquement pour le tableau avec la classe "color-table" */

/* Colonnes paires à partir de la 3e colonne 
.color-table thead tr:nth-child(n+3) th:nth-child(n+4):nth-child(2n+3),
.color-table tbody td:nth-child(n+5):nth-child(2n+3) {
  background-color: rgb(250, 214, 194);
}

 Colonnes impaires à partir de la 3e colonne 
.color-table thead tr:nth-child(n+3) th:nth-child(n+4):nth-child(2n+4),
.color-table tbody td:nth-child(n+4):nth-child(2n+4) {
  background-color: rgb(189, 218, 255);
}*/
  
</style>

<h1 class="text-3xl font-semibold text-center text-gray-800 my-6">Plan des approvisionnements par mois</h1>

        {% csrf_token %}
        
       
        <div >
          <table>
            <tr>
              <td>
                
                <form method="GET">
                  <label for="">Categroties</label>
                  <br>
                  <input type="checkbox" name = "checkAll" id="checkAll" ><label for="">Tous</label> 
                  <br>
                  {% for cat  in Categories %}
                    <input type="checkbox" name = "categoreis"  value="{{cat}}" class="category"> <label for="">{{cat}}</label>                  
                  {% endfor %}
                  <br>
                  <br>
                  Type d'approvisionnements
                  <br>
                  <input type="checkbox" name = "checkAlltype" id="checkAlltype" ><label for="">Tous</label> 
                  <br>
                  {% for type  in types %}
                    <input type="checkbox" name = "types"  value="{{type}}" class="type"> <label for="">{{type}}</label>                  
                  {% endfor %}
                  <button type="submit" class="btn btn-outline-success">Filter</button>
                </form>
                
              </td>
              <td></td>
              <td></td>
            </tr>
            
            <tr>
              <td style="width: 90%; ">
                <strong>Résulat : {{nbr_result}}</strong>
                <button id="exp"  class="btn btn-outline-success" >Excel</button>
              </td>
              <td style="width: 10%;"></td>
              
              <td style="width: 10%" ></td>
                
            </tr>
         </table>
          <table class="table table-striped color-table" border="1"  id="stock_min" style="width: fit-content;">
            
            <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    {% for mois_etd in months_ETD %}
                      <!--<th tyle="text-align:right">{{ mois|capfirst }}</th>-->
                      <th tyle="text-align:center">{{ mois_etd }}</th> 
                    {% endfor %}
                </tr>
                <tr>
                    
                    <th tyle="text-align: center" onclick="sortTable(0)">Code</th>
                    <th tyle="text-align: center;" onclick="sortTable(1)">Désignation</th>
                    <th tyle="text-align: center;" onclick="sortTable(1)">Type</th>
                    <th tyle="text-align: center;" onclick="sortTable(1)">In Hand</th>
                    {% for mois, mois_ok in months %}
                    <!--<th tyle="text-align:right">{{ mois|capfirst }}</th>-->
                        <th tyle="text-align:center">{{ mois }}</th> 
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for produit in products %}
                <tr>
                    <td>{{produit.article}}</td>
                    <td>{{produit.nom}}</td>
                    <td>{{produit.type}}</td>
                    <td style="text-align: right;">{{produit.inhand|intspace}}</td>
                    {% for mois, mois_ok in months %}
                      {% if produit|get_item:mois_ok == 0 %}
                        <td style="text-align: right;color: red;">{{ produit|get_item:mois|intspace}}</td>
                      {% elif produit|get_item:mois_ok == 2 %}
                        <td style="text-align: right;color:orange;">{{ produit|get_item:mois|intspace}}</td>
                      {% else %}
                        <td style="text-align: right;">{{ produit|get_item:mois|intspace}}</td>
                      {% endif %}
                    {% endfor %}
                    
                </tr>
                {% endfor %}
            </tbody>
        </table>
      </div>
        
        
<script>
    let ascendingOrder = [];
    const checkAll = document.getElementById('checkAll');
    const categories = document.querySelectorAll('.category');

    checkAll.addEventListener('change', () => {
      categories.forEach(cat => {
        cat.checked = checkAll.checked;
      });
    });

    const checkAlltypes = document.getElementById('checkAlltype');
    const types = document.querySelectorAll('.type');

    checkAlltypes.addEventListener('change', () => {
      types.forEach(cat => {
        cat.checked = checkAlltypes.checked;
      });
    });
function sortTable(columnIndex) {
  const table = document.getElementById("stock_min");
  const rows = Array.from(table.rows).slice(1); // Exclut l'en-tête
  const headers = table.querySelectorAll("th");

  // Initialiser l'état de tri pour la colonne si elle n'a jamais été triée
  if (ascendingOrder[columnIndex] === undefined) {
    ascendingOrder[columnIndex] = true;
  }

  // Utiliser l'état de tri actuel pour la colonne
  const ascending = ascendingOrder[columnIndex];

  rows.sort((rowA, rowB) => {
    var cellA = rowA.cells[columnIndex].innerText;
    var cellB = rowB.cells[columnIndex].innerText;
    if(columnIndex===2||columnIndex===3||columnIndex===4)
    {
      cellA = cellA.replace(" ", "");
      cellB = cellB.replace(" ", "");
    }

    
    
    const a = isNaN(cellA) ? cellA.toLowerCase() : parseFloat(cellA);
    const b = isNaN(cellB) ? cellB.toLowerCase() : parseFloat(cellB);

    return ascending ? (a > b ? 1 : -1) : (a < b ? 1 : -1);
  });

  // Alterner l'ordre pour la prochaine utilisation
  ascendingOrder[columnIndex] = !ascending;

  // Réinsérer les lignes triées dans le tableau
  rows.forEach(row => table.tBodies[0].appendChild(row));
  headers.forEach((header) => {
    const arrow = header.querySelector('.sort-arrow');
    if (arrow) {
      arrow.remove(); // Supprimer la flèche des autres colonnes
    }
  });

  // Ajouter la flèche à la colonne triée
  const currentHeader = headers[columnIndex];
  const arrow = document.createElement('span');
  arrow.classList.add('sort-arrow');
  arrow.innerHTML = ascending ? '↑' : '↓'; // Choisir la flèche selon l'ordre du tri
  currentHeader.appendChild(arrow);
} 



document.getElementById('exp').addEventListener('click', function() {
    // Récupère l'élément table
    const table = document.getElementById('stock_min');

    // Convertit la table HTML en feuille Excel
    const wb = XLSX.utils.table_to_book(table, { sheet: "Feuille1" });

    // Sauvegarde en fichier Excel
    XLSX.writeFile(wb, "export.xlsx");
});



function exportToExcel() {
            // Récupérer le tableau
            let table = document.getElementById("stock_min");

            // Créer un tableau temporaire pour les colonnes sélectionnées
            let filteredTable = document.createElement('table');
            let rows = table.rows;

            for (let i = 0; i < rows.length; i++) {
                let newRow = filteredTable.insertRow();
                let cells = rows[i].cells;

                // Ajouter uniquement les colonnes 1 et 3
                
                newRow.insertCell().textContent = cells[0].textContent; // Colonne 3
                newRow.insertCell().textContent = cells[1].textContent; // Colonne 1
                newRow.insertCell().textContent = cells[2].textContent.replace(/ /g,""); // Colonne 3
                newRow.insertCell().textContent = cells[3].textContent.replace(/ /g,""); // Colonne 3
                newRow.insertCell().textContent = cells[4].textContent.replace(/ /g,""); // Colonne 3
                
                //newRow.insertCell().textContent = cells[9].textContent; // Colonne 1                
            }

            // Convertir la table filtrée en Excel
            
            let workbook = XLSX.utils.table_to_book(filteredTable);
            XLSX.writeFile(workbook, 'stock_min.xlsx');
        }
</script>
{% endblock %}